/**
 * @file ResourceAnalysisResult.vue
 * @description 教学资源分析结果展示组件
 * @created 2024-06-30
 */

<template>
  <div class="resource-analysis-result">
    <!-- 评分和标签概览 -->
    <div class="result-overview">
      <div class="score-display">
        <span class="score-label">AI评分</span>
        <div class="score-value">
          <el-rate :value="score" disabled />
          <span class="score-number">{{ score.toFixed(1) }}</span>
        </div>
      </div>
      
      <div class="tags-overview">
        <div class="tags-title">智能标签</div>
        <div class="tags-content">
          <el-tag 
            v-for="tag in tags.slice(0, 5)" 
            :key="tag.name"
            :type="getTagType(tag.confidence)"
            class="tag-item"
            effect="light"
          >
            {{ tag.name }}
            <span class="confidence">{{ Math.round(tag.confidence * 100) }}%</span>
          </el-tag>
          <el-tag v-if="tags.length > 5" type="info" class="tag-item">
            +{{ tags.length - 5 }}
          </el-tag>
        </div>
      </div>
    </div>
    
    <!-- 分类信息 -->
    <div class="category-info">
      <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="主分类">
          {{ mainCategory || '未分类' }}
        </el-descriptions-item>
        <el-descriptions-item label="子分类">
          {{ subCategory || '未分类' }}
        </el-descriptions-item>
        <el-descriptions-item label="学科领域">
          {{ subjectArea || '未指定' }}
        </el-descriptions-item>
        <el-descriptions-item label="推荐对象">
          {{ targetAudience || '未指定' }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    
    <!-- 教学价值评估 -->
    <div class="value-assessment">
      <div class="section-title">教学价值评估</div>
      <div class="value-content">
        {{ educationalValue || '暂无评估内容' }}
      </div>
    </div>
    
    <!-- 推荐用途 -->
    <div class="recommended-uses">
      <div class="section-title">推荐用途</div>
      <div class="uses-content">
        <ul v-if="recommendedUses && recommendedUses.length > 0">
          <li v-for="(use, index) in recommendedUses" :key="index">
            {{ use }}
          </li>
        </ul>
        <div v-else class="no-content">暂无推荐用途</div>
      </div>
    </div>
    
    <!-- 所有标签详情 -->
    <div class="tags-details" v-if="showAllTags">
      <div class="section-title">所有标签</div>
      <div class="all-tags">
        <el-tag 
          v-for="tag in tags" 
          :key="tag.name"
          :type="getTagType(tag.confidence)"
          effect="light"
          class="tag-detail-item"
        >
          {{ tag.name }}
          <span class="confidence">{{ Math.round(tag.confidence * 100) }}%</span>
        </el-tag>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  tags: {
    type: Array,
    default: () => []
  },
  score: {
    type: Number,
    default: 0
  },
  mainCategory: {
    type: String,
    default: ''
  },
  subCategory: {
    type: String,
    default: ''
  },
  subjectArea: {
    type: String,
    default: ''
  },
  targetAudience: {
    type: String,
    default: ''
  },
  educationalValue: {
    type: String,
    default: ''
  },
  recommendedUses: {
    type: Array,
    default: () => []
  },
  showAllTags: {
    type: Boolean,
    default: true
  }
})

// 获取标签类型（根据置信度）
const getTagType = (confidence) => {
  if (confidence >= 0.9) return 'success'
  if (confidence >= 0.7) return ''
  if (confidence >= 0.5) return 'warning'
  return 'info'
}
</script>

<style scoped>
.resource-analysis-result {
  padding: 16px 0;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}

.result-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  align-items: flex-start;
}

.score-display {
  min-width: 180px;
}

.score-label {
  font-weight: bold;
  font-size: 14px;
  color: #606266;
}

.score-value {
  display: flex;
  align-items: center;
  margin-top: 5px;
}

.score-number {
  margin-left: 8px;
  font-size: 18px;
  font-weight: bold;
  color: #409EFF;
}

.tags-overview {
  flex: 1;
}

.tags-title {
  font-weight: bold;
  font-size: 14px;
  color: #606266;
  margin-bottom: 5px;
}

.tags-content {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-item {
  display: flex;
  align-items: center;
}

.confidence {
  font-size: 11px;
  opacity: 0.8;
  margin-left: 4px;
}

.category-info {
  margin-bottom: 20px;
}

.section-title {
  font-weight: bold;
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid #EBEEF5;
}

.value-assessment, .recommended-uses, .tags-details {
  margin-bottom: 20px;
}

.value-content, .uses-content {
  padding: 8px;
  background-color: #F8F9FA;
  border-radius: 4px;
  color: #303133;
  line-height: 1.5;
}

.no-content {
  color: #909399;
  font-style: italic;
}

.all-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  background-color: #F8F9FA;
  border-radius: 4px;
}

.tag-detail-item {
  margin-bottom: 5px;
}

ul {
  margin: 0;
  padding-left: 20px;
}

li {
  margin-bottom: 5px;
}
</style> 